<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>电子表单拟用</title>
    <link rel="stylesheet" href="cdn.staticfile.org/element-ui/2.15.7/theme-chalk/index.min.css">
    <link rel="stylesheet" href="VFormBuilds/dist/VFormRender.css?t=20210730"> <!-- 根据Web服务器或CDN路径修改 -->
    <style type="text/css">
        /* 弹出层样式 */
        .wd-modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            z-index: 1050; /* 确保在页面最上层 */
            left: 0;
            top: 0;
            width: 100%; /* 宽度100% */
            height: 100%; /* 高度100% */
            overflow: auto; /* 允许滚动 */
            background-color: rgba(0,0,0,0.5); /* 背景半透明 */
        }

        /* 弹出层内容样式 */
        .wd-modal-content {
            position: relative;
            background-color: #fefefe;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            animation-name: animatetop;
            animation-duration: 0.4s;
        }

        /* 关闭按钮样式 */
        .wd-close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .wd-close:hover,
        .wd-close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 添加动画效果 */
        @keyframes animatetop {
            from {top: -300px; opacity: 0}
            to {top: 0; opacity: 1}
        }

        .wd-span {
            border: 2px solid #333; /* 2px 深灰色实线边框 */
            padding: 5px 10px; /* 上下5px，左右10px的内边距 */
            margin: 5px; /* 上右下左5px的边距 */
            border-radius: 15px; /* 圆角边框 */
            background-color: #f8f8f8; /* 背景颜色 */
        }
    </style>
</head>
<body>

<div id="eformapp">
    <!-- 弹出层的HTML结构 -->
    <div id="wdGlobalModal" class="wd-modal" style="display:none;">
        <div id="wdModalContent" class="wd-modal-content">
            <span class="wd-close">&times;</span>
            <p>这是一个全局弹出层。</p>
        </div>
    </div>
    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
    </v-form-render>
    <el-button type="primary" style="width: 100%" @click="defaultSubmitForm" v-if="showDefaultSubmitButton">提交</el-button>
</div>

<script type="text/javascript">
    if (!!window.ActiveXObject || "ActiveXObject" in window) { //IE load polyfill.js for Promise
        var scriptEle = document.createElement("script");
        scriptEle.type = "text/javascript";
        scriptEle.src = "https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"
        document.body.appendChild(scriptEle)
    }

    function setCurrentFocusKeyValue(obj){
        var currentKey = sessionStorage.getItem('currentKey');
        var textValue = obj.getAttribute('data-value')
        sessionStorage.setItem(currentKey, textValue);
        // 改变选中元素背景颜色
        var spanElements = document.getElementsByClassName('wd-span'); // 获取所有class为myClass的span元素
        for (var i = 0; i < spanElements.length; i++) {
            spanElements[i].style.backgroundColor = '#f8f8f8';
        }
        obj.style.backgroundColor = '#3096ff';
    }

</script>
<script src="lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script src="cdn.staticfile.org/element-ui/2.15.7/index.min.js"></script>
<script src="VFormBuilds/dist/VFormRender.umd.min.js?t=20210730"></script> <!-- 根据Web服务器或CDN路径修改 -->
<script src="libs/jquery.min.js"></script>
<script src="plugins/layer/layer.js"></script>
<script src="js/common.js"></script>
<script src="js/template_preview.js"></script>
</body>
</html>